<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="item in hotArry" :key="item.id">
					<view class="swiper-item">
						<image :src="item.images.medium" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 热映 -->
		<view class="same-title wrap">
			<view class="title-left">
				<text>热映中</text>
			</view>
			<view class="title-right" data-id="1" @tap="toAll">查看全部</view>
		</view>
		<view class="hot-list">
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
				<view class="thumbial" v-for="item in hotArry" :key="item.id">
					<navigator :url="'../detail/detail?id='+item.id">
						<view class="thumbial-img">
							<image :src="item.images.small" mode="widthFix"></image>
						</view>
						<view class="thumbial-body">
							<text>{{item.title}}</text>
						</view>
					</navigator>
				</view>
			</scroll-view>
		</view>
		<!-- top250 -->
		<view class="same-title wrap">
			<view class="title-left">
				<text>电影top250</text>
			</view>
			<view class="title-right" data-id="2" @tap="toAll">查看全部</view>
		</view>
		 <view class="top250-list wrap">
			<view class="media" v-for="item in topArry" :key="item.id">
				<navigator :url="'../detail/detail?id='+item.id">
					<view class="media-left">
						<image :src="item.images.small" mode="widthFix"></image>
					</view>
					<view class="media-right">
						<view class="media-title">
							<text class="m-title">{{item.title}}</text>
							<text class="average">{{item.rating.average}}分
							</text>
						</view>
						<text class="genres">{{item.genres}}</text>
						<view class="director" v-for="list in item.directors" :key="list.id">
							<text>导演：{{list.name}}</text>
						</view>
						<text>上映时间：{{item.year}}</text>
						<!-- 评价星星 -->
						<stars :score="item.rating.average"></stars>
					</view>
				</navigator>
			</view>
		</view>
		<!-- <view class="no-more" v-show="noMoreShow">没有更多了</view> -->
		<!-- 即将上映 -->
		<view class="same-title wrap">
			<view class="title-left">
				<text>即将上映</text>
			</view>
			<view class="title-right" data-id="3" @tap="toAll">查看全部</view>
		</view>
		 <view class="soon-list wrap">
			<view class="media" v-for="item in soonArry" :key="item.id">
				<navigator :url="'../detail/detail?id='+item.id">
					<view class="media-left">
						<image :src="item.images.small" mode="widthFix"></image>
					</view>
					<view class="media-right">
						<view class="media-title">
							<text class="m-title">{{item.title}}</text>
							<text class="average">{{item.rating.average}}分
							</text>
						</view>
						<text class="genres">{{item.genres}}</text>
						<view class="director" v-for="list in item.directors" :key="list.id">
							<text>导演：{{list.name}}</text>
						</view>
						<text>上映时间：{{item.year}}</text>
						<!-- 评价星星 -->
						<stars :score="item.rating.average"></stars>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import stars from '../../components/score_star.vue';
	export default {
		data() {
			return {
				hotArry: [],
				topArry: [],
				soonArry: [],
				topStart: 1,
				toAllArry: [
					{
						id: 1,
						title: '热映中',
						link: global.BaseList.rebuo
					},
					{
						id: 2,
						title: '电影top250',
						link: global.BaseList.top
					},
					{
						id: 3,
						title: '即将上映',
						link: global.BaseList.soon
					}
				],
				scroe: 4
			}
		},
		onLoad() {
			this.hotList();
			this.topList();
			this.soonList();
		},
		components:{
			stars
		},
		methods: {
			hotList: function(){
				let rebuo = global.BaseList.rebuo;
				this.$http.get(rebuo+'?start=0&count=4').then(res=>{
					this.hotArry = res.subjects;
					// console.log(this.hotArry)
				}).catch(res=>{
					console.log(res)
				})

			},
			topList: function(){
				let _self = this;
				let top = global.BaseList.top;
				let start = (_self.topStart-1)*6;
				_self.$http.get(top+'?start='+start+'&count=4').then(res=>{
					_self.topArry = _self.topArry.concat(res.subjects);
					// console.log(_self.topArry)
				}).catch(res=>{
					console.log(res)
				})
			
			},
			soonList: function(){
				let _self = this;
				let soon = global.BaseList.soon;
				let start = (_self.topStart-1)*6;
				_self.$http.get(soon+'?start='+start+'&count=4').then(res=>{
					_self.soonArry = _self.soonArry.concat(res.subjects);
					// console.log(_self.topArry)
				}).catch(res=>{
					console.log(res)
				})
			
			},
			toAll: function(e) {
				let toAllID = e.currentTarget.dataset.id;
				let isDatas = null;
				for (var i=0; i<this.toAllArry.length; i++) {
					let obj = this.toAllArry[i];
					if (obj.id == toAllID) {
						isDatas = obj;
						
					} 
				}
				uni.navigateTo({
					url: '../all/all?title='+isDatas.title+'&links='+isDatas.link+''
				})
			}
			
		}
		
	}
</script>

<style>
	.banner{
		width: 100%;
		overflow: hidden;
	}
	.scroll-view_H{
		white-space: nowrap;
		/* padding: 30upx 20upx; */
	}
	.thumbial{
		display: inline-block;
		width: 200upx;
	}
	.thumbial-img{
		height: 276upx;
	}
	
</style>
